<template>
  <div>
    <v-row justify="center">
      <v-dialog v-model="dialog" persistent max-width="600px">
        <v-card>
          <v-card-title>
            <span class="text-h5">管理登录</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12">
                  <v-text-field
                    label="用户名*"
                    required
                    v-model="username"
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="密码*"
                    type="password"
                    required
                    v-model="password"
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-container>
            <small>*代表必须输入的部分</small>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>

            <v-btn color="blue darken-1" text @click="login"> Login </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>

    <v-main class="mt-9" id="mainPage">
      <div class="text-sm-left mb-9">
        <v-row>
          <v-col cols="12" sm="2">
            <v-sheet
              rounded="lg"
              color="white"
              elevation="9"
              outlined
              class="ma-2 mt-10 pb-10"
            >
              <v-tabs vertical class="mt-5">
                <v-tab @click="toPage('addArcticle')">新建文章</v-tab>
                <v-tab @click="toPage('adminArcticleList')">文章列表</v-tab>
                <v-tab @click="toPage('tagManager')">标签管理</v-tab>
              </v-tabs>
            </v-sheet>
          </v-col>

          <v-col cols="16" sm="10">
            <v-sheet
              rounded="lg"
              color="white"
              elevation="9"
              outlined
              class="ma-2 mt-10"
            >
              <router-view></router-view>
            </v-sheet>
          </v-col>
        </v-row>
      </div>
    </v-main>

    <!-- 这里是消息提示框 -->
    <v-snackbar v-model="snackbar" timeout="3000" color="grey darken-3">
      {{ text }}

      <template v-slot:action="{ attrs }">
        <v-btn color="blue" text v-bind="attrs" @click="snackbar = false">
          Close
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
export default {
  data: () => ({
    dialog: true,
    username: "",
    password: "",
    snackbar: false,
    text: "",
  }),
  methods: {
    toPage(params) {
      if (
        localStorage.getItem("token") === null ||
        JSON.parse(localStorage.getItem("token")).tokenHead !== "Bearer"
      ) {
        this.dialog = true;

        return;
      }
      this.$router.push({
        name: params,
      });
    },
    login() {
      this.$axios
        .post("/user/login", {
          username: this.username,
          password: this.password,
        })
        .then((response) => {
          if (response.data.code === 200) {
            this.showTipMsg("登录成功");
            localStorage.setItem("token", JSON.stringify(response.data.data));
            this.$axios.defaults.headers.common["Authorization"] =
              JSON.parse(localStorage.getItem("token")).tokenHead +
              " " +
              JSON.parse(localStorage.getItem("token")).token;
            this.dialog = false;
          } else {
            this.showTipMsg("用户名或密码错误");
          }
        });
    },
    showTipMsg(msg) {
      this.text = msg;
      this.snackbar = true;
    },
  },
  mounted() {
    //这里弹窗进行登录验证，验证成功才可以进行其他操作

    this.$store.dispatch("toAdmin", true);

    if ("Bearer" === JSON.parse(localStorage.getItem("token")).tokenHead) {
      this.$axios.defaults.headers.common["Authorization"] =
        JSON.parse(localStorage.getItem("token")).tokenHead +
        " " +
        JSON.parse(localStorage.getItem("token")).token;
      this.dialog = false;
    }
  },
};
</script>

<style>
</style>